<template>
  <div class="progress-container" :style="{
    width: `${width}px`,
    height: `${height}px`,
  }" v-if="options">
    <el-progress 
      type="dashboard" 
      :stroke-width="9" 
      :width="width" 
      :percentage="percentage" 
      stroke-linecap="round" 
      :text-color="color" 
      :format="format" 
      :color="color" 
      :define-back-color="backColor">
    </el-progress>
    <div class="progress-decoration-box" :style="{color: color}">
      <div class="progress-text">
        <span class="progress-start-text">{{ startText }}</span>
        <span class="progress-end-text">{{ endText }}</span>
      </div>
      <div class="progress-description">{{ description }}</div>
      <div class="progress-decoration" :style="{backgroundColor: color}"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义 props
const props = defineProps({
  options: {
    type: Object,
    default: () => ({
      width: 400,
      height: 200,
      percentage: 0,
      color: '#f56c6c',
      backColor: '#05322D',
      content: '',
      startText: '',
      endText: '',
      description: ''
    })
  }
});

// 响应式状态
const width = ref(400);
const height = ref(200);
const percentage = ref(0);
const color = ref('#f56c6c');
const backColor = ref('#05322D');
const content = ref('');
const startText = ref('');
const endText = ref('');
const description = ref('');

// 格式化函数
const format = () => {
  return content.value;
};

// 监听 options 变化
watch(() => props.options, (val) => {
  if (val.width) {
    width.value = val.width;
  }
  if (val.height) {
    height.value = val.height;
  }
  if (val.percentage) {
    percentage.value = val.percentage;
  }
  if (val.color) {
    color.value = val.color;
  }
  if (val.backColor) {
    backColor.value = val.backColor;
  }
  if (val.content) {
    content.value = val.content;
  }
  if (val.startText) {
    startText.value = val.startText;
  }
  if (val.endText) {
    endText.value = val.endText;
  }
  if (val.description) {
    description.value = val.description;
  }
}, {
  deep: true,
  immediate: true
});
</script>

<style scoped lang="less">
.progress-text {
  width: 60%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  margin: -20px auto 0 auto;
}

.progress-decoration-box {
  width: 100%;
  text-align: center;
  .progress-decoration {
    width: 60px;
    height: 5px;
    margin: 0 auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .progress-description {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 35px;
  }
}
</style>
